<template>
	<view id="domxee-content" :class="globalData.defaultThemes">
		<view id="header_wrapper">
			<nii-navbar :globalData="globalData" :scroll="scroll" back fixed>
				<view slot="title">
					<view id="title" class="fw-bolder">立即结算</view>
				</view>
			</nii-navbar>
		</view>
		<view id="content_wrapper">
			<view id="address" v-if="renders.address.enable">
				<view class="address d-padding">
					<view class="address_box section">
						<view class="empty_address fw-bold text-center" v-if="!renders.address.contents.enable" @click="addressPopup">
							点击添加收货地址
						</view>
						<view class="address_info" @click="addressAction" v-else>
							<view class="infos d-flex align-items-center">
								<view class="name fw-bolder">{{renders.address.contents.address.consignee}}</view>
								<view class="mobile fw-bolder">{{renders.address.contents.address.phone}}</view>
							</view>
							<view class="fulls d-flex align-items-baseline">
								<view class="full vice_text">{{renders.address.contents.address.province_name+renders.address.contents.address.city_name+renders.address.contents.address.area_name+renders.address.contents.address.address}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view id="goods">
				<view class="goods d-padding">
					<view class="goods_box">
						<view class="item section" v-for="(item, index) in renders.goods" :key="index">
							<view class="item_box d-flex align-items-center">
								<view class="cover_box">
									<u--image :src="item.cover" width="190rpx" height="190rpx" radius="20rpx" mode="aspectFit" :bgColor="globalData.colors.current.section" class="cover">
									  <template v-slot:loading>
										 <image src="@/static/media/images/loading.png" mode="aspectFit"></image>
									  </template>
									  <template v-slot:error>
										 <image src="@/static/media/images/loading.png" mode="aspectFit"></image>
									  </template>
									</u--image>
								</view>
								<view class="infos">
									<view class="title fw-bolder u-line-2">{{item.title}}</view>
									<view class="specifition vice_text fw-bold">{{item.specification_name}} * {{item.count}}</view>
									<view class="price fw-bolder color">¥{{(item.price/100).toFixed(2)}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view id="discounts" v-if="renders.discounts.enable">
				<view class="discounts d-padding">
					<view class="discounts_box section">
						<view class="title fw-bolder">优惠折扣</view>
						<view class="items">
							<view class="item" v-for="(item, index) in renders.discounts.lists" :key="index">
								<view class="item_box d-flex justify-content-between align-items-center">
									<view class="left d-flex align-items-center">
										<view class="domxee_icon color fw-bolder" v-if="data.sections.formData.discounts.includes(item.alias)" @click="selectDiscount(item)">&#xe730;</view>
										<view class="domxee_icon vice_text" @click="selectDiscount(item)" v-else>&#xe72f;</view>
										<view class="names d-flex align-items-center">
											<view class="name fw-bolder">{{item.name}}</view>
											<view class="tip vice_text">({{item.tip}} <span class="color fw-bolder">{{(item.amount).toFixed(2)}}</span>)</view>
										</view>
									</view>
									<view class="right">
										<view class="price fw-bolder">-¥{{(item.amount).toFixed(2)}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view id="footer">
				<view class="footer nav_bg d-padding">
					<view class="footer_box">
						<view class="line d-flex justify-content-between align-items-center">
							<view class="name vice_text">商品总额</view>
							<view class="price vice_text fw-bolder">¥{{(renders.amounts.goods_amount/100).toFixed(2)}}</view>
						</view>
						<view class="line d-flex justify-content-between align-items-center">
							<view class="name vice_text">物流金额</view>
							<view class="price vice_text fw-bolder">¥{{(renders.amounts.express_amount/100).toFixed(2)}}</view>
						</view>
						<view class="line d-flex justify-content-between align-items-center">
							<view class="name vice_text">优惠金额</view>
							<view class="price vice_text fw-bolder">-¥{{(renders.amounts.discount_amount/100).toFixed(2)}}</view>
						</view>
						<view class="line total_price d-flex justify-content-between align-items-center">
							<view class="name fw-bolder">共计</view>
							<view class="price color fw-bolder">¥{{(renders.amounts.pay_amount/100).toFixed(2)}}</view>
						</view>
						<view class="button fw-bold bg text-center w-fill-available" @click="purchaseAction">立即下单</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="shows.add_address" mode="bottom" bgColor="transparent" :safeAreaInsetBottom="false" @close="closePopup('add_address')">
			<view class="domxee_popup d-padding">
				<view class="section" id="add_address_popup">
					<view class="popup_close" @click="closePopup('add_address')"><view class="domxee_icon">&#xe619;</view></view>
					<view class="title fw-bolder main_text text-center">添加收货地址</view>
					<view class="address_box">
						<view class="form">
							<view class="item">
								<view class="name fw-bold">收货人姓名</view>
								<input type="text" class="input page_bg main_text" placeholder-class="vice_text" placeholder="请输入收货人姓名" v-model="data.sections.address.consignee" confirm-type="done">
							</view>
							<view class="item">
								<view class="name fw-bold">联系电话</view>
								<input type="number" class="input page_bg main_text" placeholder-class="vice_text" placeholder="请输入收货电话" v-model="data.sections.address.phone" confirm-type="done">
							</view>
							<view @click="shows.areas = true" class="item">
								<view class="name fw-bold">配送地区</view>
								<view style="position: relative; z-index: 0;">
									<input style="position: relative; z-index: -1;" type="text" class="input page_bg main_text" placeholder-class="vice_text" placeholder="点击选择配送地区" v-model="data.sections.address.areas">
								</view>
							</view>
							<view class="item">
								<view class="name fw-bold">详细地址</view>
								<input type="text" class="input page_bg main_text" placeholder-class="vice_text" placeholder="请输入详细收货地址" v-model="data.sections.address.address" confirm-type="done">
							</view>
						</view>
						<view class="tip text-center vice_text">首次添加地址将自动设为默认地址</view>
						<view class="button bg text-center fw-border" @click="storeAddress">
							保存并设置配送至本地址
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="shows.address" mode="bottom" :closeable="false" bgColor="transparent" :safeAreaInsetBottom="false" @close="closePopup('address')">
			<view class="domxee_popup d-padding">
				<view class="section" id="address_popup">
					<view class="popup_close" @click="closePopup('address')"><view class="domxee_icon">&#xe619;</view></view>
					<view class="title fw-bolder main_text text-center">配送地址</view>
					<view class="addresses_box content_box main_text">
						<view class="addresses">
							<view class="list d-flex align-items-center" v-for="(address, index) in data.sections.addresses" :key="index" @click="addressSelect(address.id)">
								<view class="left">
									<view class="domxee_icon iconfont icon-yuanquan_xuanzhong color fw-bolder" v-if="parseInt(data.sections.formData.address_id) === parseInt(address.id)"></view>
									<view class="domxee_icon iconfont icon-yuanquan fw-bold" v-else></view>
								</view>
								<view class="right">
									<view class="address main_text fw-bold u-line-1">{{address.address}}</view>
									<view class="areas vice_text u-line-1">{{address.area_address}}</view>
								</view>
							</view>
						</view>
						<view class="button bg text-center fw-border" @click="addressPopup">
							添加地址
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<u-picker :show="shows.areas" ref="areaPicker" :defaultIndex="data.sections.area_picker.default" :loading="data.sections.area_picker.loading" :columns="data.sections.area_picker.columns" :cancelColor="globalData.colors.light.main" :confirmColor="globalData.colors.theme.color" keyName="guard_name" title="选择配送地区" @change="changeAreaPicker" @confirm="confirmAreaPicker" @cancel="shows.areas = false"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				globalData: {windowWidth: 0, statusBarHeight: 0, navHeight: 0, navigationBarHeight: 0, wechatCapsule: {width: 0, height: 0, top: 0, right: 0, bottom: 0, left: 0}, defaultThemes: [], colors: {}, configs: {} },
				scroll: 0,
				current_page: {route: '', params: {}, url: ''},
				ready: false,
				options: {

				},
				styles: {

				},
				shows: {
					address: false,
					add_address: false,
					areas: false,
				},
				renders: {
					address: {enable: false, contents: {enable: false, address: {id: 0, phone: '', consignee: '',  province_id: 0, province_name: '', city_id: 0, city_name: '', area_id: 0, area_name: '', address: ''}}},
					goods: [],
					discounts: {enable: false, lists: []},
					amounts: {goods_amount: 0, express_amount: 0, discount_amount: 0, pay_amount: 0},
				},
				data: {
					sections: {
						formData: {
							ids: '',
							address_id: 0,
							discounts: [],
						},
						addresses: [],
						address: {consignee: '', phone: '', province_id: 0, province_name: '', city_id: 0, city_name: '', area_id: 0, area_name: '', address: ''},
						area_picker: {default: [], loading: false, columns: []},
						street_picker: {columns: []},
					},
				},
			}
		},
		onReady() {						//页面渲染完毕后操作（动态获取/调整元素宽高位置等需在ready后获取最为准确）
			//设置对象
			let that = this;

		},
		onShow() {						//页面显示后操作（关闭、后台运行等操作后重新打开访问触发、可在实时性较高操作页面进行全页刷新）
			//设置对象
			let that = this;
			//判断是否准备就绪
			if (that.ready) {
				//初始数据
				that.initInformation();
			}
		},
		onLoad(options) {				//页面加载时操作（options可获取当前页面传递参数，如：options.id）
			//设置对象
			let that = this;
			//设置当前页面数据
			that.current_page = that.nii_common.pages.getCurrentUrl();
			//设置默认数据
			that.globalData = that.nii_common.pages.initGlobalData(getApp().globalData);
			//设置参数
			that.options = options;
			//设置信息
			that.data.sections.formData.ids = options.ids;
			//初始数据
			that.initInformation();
		},
		methods: {
			//默认跳转操作
			navigateAction: function(alias, requestParams = {}, action = 'navigate', authenticate = false, animationType = 'slide-in-right') {
				//跳转页面
				this.nii_common.navigate.action(alias, requestParams, action, authenticate, animationType);
			},
			initInformation: function(address_id = 0) {
				//设置对象
				let that = this;
				//设置请求参数
				if (parseInt(address_id) > 0) {that.options.address_id = parseInt(address_id);}
				//loading
				!that.ready && that.nii_common.toastLoading('加载中');
				//开始准备
				that.ready = false;
				//发起请求
				that.nii_common.request.build('cart/settlement/information', that.options, 'GET', function (res) {
					//整理数据
					that.renders = res.data;
					//设置优惠项
					that.data.sections.formData.discounts = [];
					//设置地址ID
					that.data.sections.formData.address_id = that.renders.address.enable ? that.renders.address.contents.address.id : 0;
					//设置准备已就绪
					that.ready = true;
				}, function (res) {
					//提示错误
					that.nii_common.toastAlert(res.msg);
					//返回购物车
					setTimeout(function (){that.navigateAction('cart')}, 1500);
				}, function(res) {
					//隐藏loading
					that.nii_common.toastLoadingHide();
				});	
			},
			selectDiscount: function(item) {
				//设置对象
				let that = this;
				//判断是否存在选中优惠
				if (uni.$u.test.isEmpty(that.data.sections.formData.discounts)) {
					//追加优惠
					that.data.sections.formData.discounts.push(item.alias);
					//增加优惠金额
					that.renders.amounts.discount_amount += parseInt(item.amount);
					//减少支付金额
					that.renders.amounts.pay_amount -= parseInt(item.amount);
				} else {
					//判断是否包含当前优惠
					if (that.data.sections.formData.discounts.includes(item.alias)) {
						//移除优惠
						that.nii_common.removeArrItem(that.data.sections.formData.discounts, item.alias);
						//减去优惠
						that.renders.amounts.discount_amount -= parseInt(item.amount);
						//增加支付金额
						that.renders.amounts.pay_amount += parseInt(item.amount);
					} else {
						//追加优惠
						that.data.sections.formData.discounts.push(item.alias);
						//增加优惠金额
						that.renders.amounts.discount_amount += parseInt(item.amount);
					//减少支付金额
					that.renders.amounts.pay_amount -= parseInt(item.amount);
					}
				}
			},
			purchaseAction: function () {
				//获取对象
				const that = this;
				//判断是否选择地址
				if (that.renders.address.enable && parseInt(that.data.sections.formData.address_id) <= 0) {
					//提示信息
					that.nii_common.toastAlert('请先选择收货地址');
					//返回失败
					return false;
				}
				//loading
				that.nii_common.toastLoading('正在下单...');
				//发起请求
				that.nii_common.request.build('orders/create', that.data.sections.formData, 'POST', function (res) {
					//提示成功
					that.nii_common.toastAlert('下单成功', 'success');
					//延迟跳转
					setTimeout(function () {
						//跳转收银
						that.navigateAction('cashier', res.data);
					}, 1500);
				}, function (res) {
					//提示错误
					that.nii_common.toastAlert(res.msg);
				}, function(res) {
					//隐藏loading
					that.nii_common.toastLoadingHide();
				});	
			},
			addressPopup: function() {
				//设置对象
				let that = this;
				//关闭配送地址弹窗
				that.shows.address = false;
				//设置地址信息
				that.data.sections.address = {
					consignee: '',
					phone: '',
					province_id: 0,
					province_name: '',
					city_id: 0,
					city_name: '',
					area_id: 0,
					area_name: '',
					address: '',
				};
				//loading
				that.nii_common.toastLoading('获取地址中...');
				//发送请求
				that.nii_common.request.build('areas/picker', {}, 'POST', function (res) {
					//设置默认地址信息
					that.data.sections.area_picker.columns = res.data.address_columns;
					//循环获取INDEX
					res.data.address_columns[0].forEach((area, index) => {
						//判断是否匹配
						if (parseInt(area['id']) === parseInt(that.data.sections.address.province_id)) {
							//设置index
							that.data.popups.area_picker.default[0] = index;
						}
					});
					res.data.address_columns[1].forEach((area, index) => {
						//判断是否匹配
						if (parseInt(area['id']) === parseInt(that.data.sections.address.city_id)) {
							//设置index
							that.data.popups.area_picker.default[1] = index;
						}
					});
					res.data.address_columns[2].forEach((area, index) => {
						//判断是否匹配
						if (parseInt(area['id']) === parseInt(that.data.sections.address.area_id)) {
							//设置index
							that.data.popups.area_picker.default[2] = index;
						}
					});
					//打开新增地址弹窗
					that.shows.add_address = true;
				}, function (res) {
					//提示失败
					that.nii_common.toastAlert(res.msg);
				}, function () {
					//隐藏loading
					that.nii_common.toastLoadingHide();
				});
				//截断操作
				return true;
			},
			closePopup: function(alias) {
				//设置对象
				let that = this;
				//根据类型处理关闭弹窗
				that.shows[alias] = false;
			},
			addressAction: function() {
				//设置对象
				let that = this;
				//loading
				that.nii_common.toastLoading('查询中...');
				//发送请求
				that.nii_common.request.build('user/addresses/lists', {}, 'POST', function (res) {
					//设置信息
					that.data.sections.addresses = res.data;
					//显示弹窗
					that.shows.address = true;
				}, function (res) {
					//提示失败
					that.nii_common.toastAlert(res.msg);
				}, function () {
					//隐藏loading
					that.nii_common.toastLoadingHide();
				}, true);
			},
			changeAreaPicker: function(e) {
				//设置对象
				let that = this;
				//获取结果
				const {columnIndex, index, picker = this.$refs.areaPicker } = e;
				switch (parseInt(columnIndex)) {
					case 0:
						that.data.sections.address.province_id = that.data.sections.area_picker.columns[0][index]['id'];
						that.data.sections.address.province_name = that.data.sections.area_picker.columns[0][index]['guard_name'];
						//更改信息
						that.querySubAreas(that.data.sections.address.province_id, 1, function() {
							//判断是否为空
							if (!uni.$u.test.isEmpty(that.data.sections.area_picker.columns[1])) {
								that.data.sections.address.city_id = that.data.sections.area_picker.columns[1][0]['id'];
								that.data.sections.address.city_name = that.data.sections.area_picker.columns[1][0]['guard_name'];
								that.querySubAreas(that.data.sections.address.city_id, 2, function() {
									//判断是否为空
									if (!uni.$u.test.isEmpty(that.data.sections.area_picker.columns[2])) {
										that.data.sections.address.area_id = that.data.sections.area_picker.columns[2][0]['id'];
										that.data.sections.address.area_name = that.data.sections.area_picker.columns[2][0]['guard_name'];
									} else {
										//清空数据
										that.data.sections.address.area_id = 0;
										that.data.sections.address.area_name = '';
									}
								});
							} else {
								//清空数据
								that.data.sections.address.city_id = 0;
								that.data.sections.address.city_name = '';
							}
						});
					break;
					case 1:
						that.data.sections.address.city_id = that.data.sections.area_picker.columns[1][index]['id'];
						that.data.sections.address.city_name = that.data.sections.area_picker.columns[1][index]['guard_name'];
						//更改信息
						that.querySubAreas(that.data.sections.address.city_id, 2, function() {
							//判断是否为空
							if (!uni.$u.test.isEmpty(that.data.sections.area_picker.columns[2])) {
								that.data.sections.address.area_id = that.data.sections.area_picker.columns[2][0]['id'];
								that.data.sections.address.area_name = that.data.sections.area_picker.columns[2][0]['guard_name'];
							} else {
								//清空数据
								that.data.sections.address.area_id = 0;
								that.data.sections.address.area_name = '';
							}
						});
					break;
					case 2:
						that.data.sections.address.area_id = that.data.sections.area_picker.columns[2][index]['id'];
						that.data.sections.address.area_name = that.data.sections.area_picker.columns[2][index]['guard_name'];
					break;
				}
			},
			querySubAreas: function(id, index, callback) {
				//设置对象
				let that = this;
				//设置loading
				that.data.sections.area_picker.loading = true;
				//其他操作
				that.nii_common.request.build('areas/lists', {id: id}, 'POST', function (res) {
					//判断是否设置街道
					if (parseInt(index) >= 3) {
						//返回信息
						that.data.sections.street_picker.columns[0] = res.data;
						that.$refs.streetPicker.setColumnValues(0, res.data);
					} else {
						//返回信息
						that.$refs.areaPicker.setColumnValues(index, res.data);
						that.data.sections.area_picker.columns[index] = res.data;
					}
					//判断是否存在回调
					if (typeof (callback) === 'function') {
						//执行回调
						callback();
					}
				}, function (res) {
					//提示错误
					that.nii_common.toastAlert(res.msg);
				}, function(res) {
					//关闭loading
					that.data.sections.area_picker.loading = false;
				}, true);
			},
			confirmAreaPicker: function(e) {
				//设置对象
				let that = this;
				//设置地区
				that.data.sections.address.areas = that.data.sections.address.province_name +' / '+ that.data.sections.address.city_name +' / '+ that.data.sections.address.area_name;
				//清空详细地址
				this.data.sections.address.address = '';
				//隐藏弹窗
				this.shows.areas = false;
			},
			changeStreetPicker: function(e) {
				//设置对象
				let that = this;
				//获取结果
				const {columnIndex, index, picker = this.$refs.streetPicker } = e;
				//设置街道信息
				that.data.sections.address.street_id = that.data.sections.street_picker.columns[columnIndex][index]['id'];
				that.data.sections.address.stree_name = that.data.sections.street_picker.columns[columnIndex][index]['guard_name'];
			},
			confirmStreetPicker: function(e) {
				//设置对象
				let that = this;
				//隐藏弹窗
				that.shows.street = false;
			},
			storeAddress: function () {
				//设置对象
				let that = this;
				//loading
				that.nii_common.toastLoading('保存中...');
				//发送请求
				that.nii_common.request.build('user_address/store', that.data.sections.address, 'POST', function (res) {
					//刷新数据
					that.initInformation(res.id);
					//隐藏弹窗
					that.shows.address = that.shows.add_address = false;
				}, function (res) {
					//提示失败
					that.nii_common.toastAlert(res.msg);
				}, function () {
					//隐藏loading
					that.nii_common.toastLoadingHide();
				}, true);
			},
			addressSelect: function(id) {
				//设置对象
				let that = this;
				//刷新数据
				that.initInformation(id);
				//隐藏弹窗
				that.shows.address = that.shows.add_address = false;
			},
			// requestDemo: function() {
			// 	//获取对象
			// 	const that = this;
			// 	//loading
			// 	that.nii_common.toastLoading('处理中...');
			// 	//发起请求
			// 	that.nii_common.request.build('', {}, 'POST', function (res) {
			// 		//提示成功
			// 		that.nii_common.toastAlert('处理成功', 'success');
			// 	}, function (res) {
			// 		//提示错误
			// 		that.nii_common.toastAlert(res.msg);
			// 	}, function(res) {
			// 		//隐藏loading
			// 		that.nii_common.toastLoadingHide();
			// 	});	
			// }
		},
		onPullDownRefresh(res) {
			//设置对象
			let that = this;
			
			//TODO：页面下拉刷新时的事件
			
			
			//停止刷新
			uni.stopPullDownRefresh();	
		},
		onReachBottom() {
			//设置对象
			let that = this;
			
			//TODO：页面滑动触底时的事件
			
		},
		onPageScroll: function(e) {
			//设置页面滑动高度
			this.scroll = e.scrollTop

			//TODO：需判断滑动高度后处理的事件

		}
	}

</script>

<style lang="scss">
	#header_wrapper {
		#title {
			font-size: 40rpx;
			line-height: 48rpx;
			letter-spacing: 1rpx;
			margin-left: 10rpx;
			font-weight: 600;
		}
		#back_btn {
			font-size: 40rpx;
			width: 60rpx;
			height: 60rpx;
			line-height: 60rpx;
			border-radius: 60rpx;
		}
	}
	#content_wrapper {
		padding-bottom: 440rpx;
		#certification {
			margin-top: 40rpx;
			.certification {
				.certification_box {
					padding: 30rpx 40rpx;
					border-radius: 20rpx;
					.left {
						font-size: 30rpx;
						line-height: 42rpx;
					}
					.right {
						font-size: 24rpx;
						line-height: 34rpx;
						.text {
							margin-right: 10rpx;
						}
					}
				}
			}
		}
		#address {
			margin-top: 20rpx;
			.address {
				.address_box {
					position: relative;
					padding: 30rpx 40rpx 50rpx 40rpx;
					border-radius: 20rpx;
					.empty_address {
						font-size: 30rpx;
						line-height: 42rpx;
					}
					.address_bottom {
						position: absolute;
						bottom: 0;
						left: 0;
						width: 100%;
						height: 8rpx;
					}
					.address_info {
						.infos {
							.name {
								font-size: 36rpx;
								line-height: 50rpx;
								margin-right: 40rpx;
							}
							.mobile {
								font-size: 36rpx;
								line-height: 50rpx;
							}
						}
						.fulls {
							margin-top: 20rpx;
							.default {
								padding: 0 20rpx;
								margin-right: 20rpx;
								height: 40rpx;
								border-radius: 10rpx;
								font-size: 24rpx;
								line-height: 40rpx;
							}
							.full {
								font-size: 24rpx;
								line-height: 34rpx;
							}
						}
					}
				}
			}
		}
		#goods {
			margin-top: 20rpx;
			.goods {
				.goods_box {
					.item {
						margin-top: 20rpx;
						padding: 30rpx 20rpx;
						border-radius: 20rpx;
						.item_box {
							.cover_box {
								width: 190rpx;
								height: 190rpx;
								border-radius: 20rpx;
								margin-right: 20rpx;
							}
							.infos {
								.title {
									width: 410rpx;
									height: 80rpx;
									font-size: 28rpx;
									line-height: 40rpx;
								}
								.specifition {
									margin-top: 10rpx;
									font-size: 28rpx;
									line-height: 40rpx;
								}
								.price {
									margin-top: 12rpx;
									font-size: 26rpx;
									line-height: 36rpx;
								}
							}
						}
					}
				}
			}
		}
		#discounts {
			margin-top: 30rpx;
			.discounts {
				.discounts_box {
					padding: 40rpx 30rpx;
					border-radius: 20rpx;
					.title {
						font-size: 32rpx;
						line-height: 44rpx;
					}
					.items {
						margin-top: 40rpx;
						.item {
							margin-top: 20rpx;
							.item_box {
								.left {
									.domxee_icon {
										margin-right: 20rpx;
										font-size: 30rpx;
										line-height: 30rpx;
									}
									.names {
										.name {
											margin-right: 10rpx;
											font-size: 26rpx;
											line-height: 36rpx;
										}
										.tip {
											font-size: 20rpx;
											line-height: 36rpx;
											span {
												margin: 0 10rpx;
											}
										}
									}
								}
								.right {
									.price {
										font-size: 24rpx;
										line-height: 34rpx;
									}
								}
							}
							.item_box:first-child {
								margin-top: 0;
							}
						}
					}
				}
			}
		}
		#footer {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 750rpx;
			.footer {
				.footer_box {
					padding: 40rpx;
					.line {
						margin-top: 20rpx;
						.name {
							font-size: 26rpx;
							line-height: 36rpx;
						}
						.price {
							font-size: 26rpx;
							line-height: 36rpx;
						}
					}
					.total_price {
						.name {
							font-size: 32rpx;
							line-height: 44rpx;
						}
						.price {
							font-size: 32rpx;
							line-height: 44rpx;
						}
					}
					.line:first-child {
						margin-top: 0;
					}
					.button {
						margin-top: 40rpx;
						padding: 20rpx 100rpx;
						border-radius: 40rpx;
						font-size: 28rpx;
						line-height: 40rpx;
					}
				}
			}
		}
	}
	#add_address_popup {
		border-radius: 20rpx 20rpx 0 0;
		.title {
			font-size: 36rpx;
			line-height: 50rpx;
		}
		.address_box {
			margin-top: 40rpx;
			.form {
				.item {
					margin-top: 20rpx;
					.name {
						font-size: 24rpx;
						line-height: 34rpx;
					}
					.input {
						padding: 20rpx 30rpx;
						margin-top: 20rpx;
						border-radius: 20rpx;
						font-size: 24rpx;
						line-height: 34rpx;
					}
				}
				.item:first-child {
					margin-top: 0;
				}
			}
			.tip {
				margin-top: 50rpx;
				font-size: 24rpx;
				line-height: 34rpx;
			}
			.button {
				width: 580rpx;
				margin: 20rpx auto 0 auto;
				border-radius: 20rpx;
				padding: 20rpx;
			}
		}
	}
	#address_popup {
		border-radius: 20rpx 20rpx 0 0;
		.title {
			font-size: 36rpx;
			line-height: 50rpx;
		}
		.addresses_box {
			.addresses {
				max-height: 400rpx;
				overflow: auto;
				.list {
					margin-top: 40rpx;
					.left {
						margin-right: 20rpx;
						.domxee_icon {
							font-size: 26rpx;
						}
					}
					.right {
						.address {
							font-size: 28rpx;
							line-height: 40rpx;
							letter-spacing: 1rpx;
						}
						.areas {
							font-size: 20rpx;
							line-height: 44rpx;
						}
					}
				}
			}
			.button {
				margin-top: 100rpx;
				border-radius: 33rpx;
				padding: 26rpx 0;
				font-size: 26rpx;
				line-height: 36rpx;
				letter-spacing: 1rpx;
			}
		}
	}
</style>
